<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>当前计数器：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script>
<!--如果不定义成函数，就会共用变量，到时候会造成联动反应-->
const a = {
  counter: 0
}
  Vue.component('cpn',{
    template:'#cpn',
    data(){
      // return {
      //   counter:0
      // }
      return a
    },
    methods:{
      increment(){
        a.counter++;
      },
      decrement(){
        a.counter--;
      },
    }
  })
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello vue',
        }

    })
</script>

</body>
</html>